<template>
    <div class="bpm-task-executors">
        <table class="bpm-table">
            <tr>
                <th style="width: 200px">{{ i18n('taskExecutors.exePath', '执行路径') }}</th>
                <th>{{ i18n('taskExecutors.executor', '执行人') }}</th>
            </tr>
            <!--一个节点 -->
            <template v-if="newNodeExecutors.length==1">
                <tr>
                    <td>{{ newNodeExecutors[0].nodeName }}</td>
                    <td>
                        <div v-if="newNodeExecutors[0].nodeType=='UserTask' " class="bpm-task-executors-nodetype">
                            <!-- 用户  -->
                            <div
                                v-if="newNodeExecutors[0].users.length>0 ||  (newNodeExecutors[0].users.length==0 && (!newNodeExecutors[0].groups || newNodeExecutors[0].groups.length==0)) "
                                class="bpm-task-executors-tag">
                                <bpm-executors v-model="newNodeExecutors[0].users"
                                               :filter="newNodeExecutors[0].userFilter"
                                               :single="newNodeExecutors[0].single"
                                               :readonly="!newNodeExecutors[0].allowSelectExecutor || newNodeExecutors[0].multipleType=='batch'"></bpm-executors>
                            </div>
                            <!-- 部门  -->
                            <div v-else class="bpm-task-executors-tag">
                                <rx-group-component :showDimId="true" v-model="newNodeExecutors[0].groups"
                                                    :filter="newNodeExecutors[0].groupFilter"
                                                    :single="singleExecutor"
                                                    :readonly="!newNodeExecutors[0].allowSelectExecutor || newNodeExecutors[0].multipleType=='batch'"></rx-group-component>
                            </div>
                        </div>
                        <!--   -->
                        <div v-else>
                            <div class="bpm-task-executors-user"
                                 v-for="(subNodeExe,index) in newNodeExecutors[0].outcomeNodeUsers" :key="index">
                                <span>{{ subNodeExe.nodeName }}</span>
                                <div v-if="subNodeExe.nodeType=='UserTask' " class="bpm-task-executors-nodetype">
                                    <!-- 用户  -->
                                    <div
                                        v-if="subNodeExe.users.length>0 ||  (subNodeExe.users.length==0 && (!subNodeExe.groups || subNodeExe.groups.length==0)) "
                                        class="bpm-task-executors-tag">
                                        <bpm-executors v-model="subNodeExe.users" :filter="subNodeExe.userFilter"
                                                       :single="subNodeExe.single"
                                                       :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'"></bpm-executors>
                                    </div>
                                    <!-- 部门  -->
                                    <div v-else class="bpm-task-executors-tag">
                                        <rx-group-component :showDimId="true" v-model="subNodeExe.groups"
                                                            :filter="subNodeExe.groupFilter"
                                                            :single="singleExecutor"
                                                            :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'"></rx-group-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </template>
            <!--多个节点-->
            <template v-else>
                <tr v-for="(node,idx) in newNodeExecutors" :key="node.nodeId">
                    <td>
                        <span class="label">
                        <a-radio :value="idx" :checked="node.selected" @change.stop="onChange"> </a-radio>
                        </span>
                        <span>{{ node.nodeName }}</span>
                    </td>
                    <td>
                        <div class="bpm-task-executors-nodetype" v-if="node.nodeType=='UserTask' ">
                            <!-- 用户  -->
                            <div
                                v-if="node.users.length>0 ||  (node.users.length==0 && (!node.groups || node.groups.length==0)) "
                                class="bpm-task-executors-tag">
                                <bpm-executors v-model="node.users" :filter="node.userFilter" :single="node.single"
                                               :readonly="!node.allowSelectExecutor || node.multipleType=='batch'"
                                               :nodeChecked="node.selected"></bpm-executors>
                            </div>
                            <!-- 部门  -->
                            <div v-else class="bpm-task-executors-tag">
                                <rx-group-component :showDimId="true" v-model="node.groups" :filter="node.groupFilter"
                                                    :single="singleExecutor"
                                                    :readonly="!node.allowSelectExecutor || node.multipleType=='batch'"
                                                    :nodeChecked="false"></rx-group-component>
                            </div>
                        </div>
                        <div v-else>
                            <div class="bpm-task-executors-user" v-for="subNodeExe in node.outcomeNodeUsers">
                                <span>{{ subNodeExe.nodeName }}</span>
                                <div v-if="subNodeExe.nodeType=='UserTask' " class="bpm-task-executors-nodetype">
                                    <!-- 用户  -->
                                    <div
                                        v-if="subNodeExe.users.length>0 ||  (subNodeExe.users.length==0 && (!subNodeExe.groups || subNodeExe.groups.length==0)) "
                                        class="bpm-task-executors-tag">
                                        <bpm-executors v-model="subNodeExe.users" :filter="subNodeExe.userFilter"
                                                       :single="subNodeExe.single"
                                                       :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'"
                                                       :nodeChecked="node.selected"></bpm-executors>
                                    </div>
                                    <!-- 部门  -->
                                    <div v-else class="bpm-task-executors-tag">
                                        <rx-group-component :showDimId="true" v-model="subNodeExe.groups"
                                                            :filter="subNodeExe.groupFilter"
                                                            :single="singleExecutor"
                                                            :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'"
                                                            :nodeChecked="false"></rx-group-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </template>
        </table>
    </div>
</template>

<script>
import {Util} from '@lowcode/jpaas-base-lib';
import {RxUserComponent, RxGroupComponent} from "@lowcode/jpaas-share-component";
import BpmExecutors from "./BpmExecutors.vue";

export default {
    name: "bpm-task-executors",
    components: {
        RxUserComponent,
        RxGroupComponent,
        BpmExecutors
    },
    props: {
        /**
         * 节点信息
         */
        nodeExecutors: {
            type: Array,
            default: () => []
        },
        /**
         * 流程节点配置
         */
        taskConfig: {
            type: Object
        },
        /**
         * 流程全局配置
         */
        processConfig: {
            type: Object
        },
    },
    data() {
        return {
            newNodeExecutors: [],
            //执行人单选
            singleExecutor: false
        }
    },
    created() {
        this.newNodeExecutors = Util.deepClone(this.nodeExecutors);
        this.convertLocal();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmTask", key);
        },
        onChange(e) {
            var len = this.newNodeExecutors.length;
            for (var i = 0; i < len; i++) {
                var obj = this.newNodeExecutors[i];
                var val = e.target.value;
                obj.selected = val == i;
            }
        },
        convertLocal() {
            if (this.newNodeExecutors) {
                for (var i = 0; i < this.newNodeExecutors.length; i++) {
                    var o = this.newNodeExecutors[i];
                    if (o.selected == undefined) {
                        o.selected = i == 0;
                    }
                    this.convertLocalRow(o);
                }
            }
            //允许选择执行人 获取是否只允许单选
            if (this.allowSelectExecutor) {
                let rtn = false;
                if (this.taskConfig && this.taskConfig.switchOptions.includes("singleExecutor")) {
                    rtn = true;
                } else {
                    if (this.processConfig && this.processConfig.switchOptions.includes("singleExecutor")) {
                        rtn = true;
                    }
                }
                this.singleExecutor = rtn;
            }
        },
        convertLocalRow(o) {
            if (o.nodeType == "UserTask") {
                this.convertToLocalExecutors(o);
            } else if (o.nodeType.indexOf("Gateway") || o.nodeType.indexOf("SubProcess")) {
                var rows = o.outcomeNodeUsers;
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    this.convertToLocalExecutors(row);
                }
            }
        },
        convertToLocalExecutors(o) {
            var users = [];
            var groups = [];
            var executors = o.executors;
            for (var i = 0; i < executors.length; i++) {
                var executor = executors[i];
                if (executor.type == 'user') {
                    users.push(executor);
                } else {
                    groups.push(executor);
                }
            }
            o.users = users;
            o.groups = groups;
        },
        convertUsers(o) {
            delete o.executors;
            var executors = [];

            if (o.users) {
                for (var i = 0; i < o.users.length; i++) {
                    var user = o.users[i];
                    user.type = "user";
                    executors.push(user);
                }
            }

            if (o.groups) {
                for (var i = 0; i < o.groups.length; i++) {
                    var group = o.groups[i];
                    group.type = "group";
                    executors.push(group);
                }
            }

            o.executors = executors;
        },
        convertData() {
            for (var i = 0; i < this.newNodeExecutors.length; i++) {
                var o = this.newNodeExecutors[i];

                if (o.nodeType == "UserTask") {
                    this.convertUsers(o);
                } else if (o.nodeType.indexOf("Gateway") != -1 || o.nodeType.indexOf("SubProcess") != -1) {
                    var rows = o.outcomeNodeUsers;
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        if (row.nodeType == "UserTask") {
                            this.convertUsers(row);
                        }
                    }
                }
            }
        },
        getDestNodeId() {
            if (this.newNodeExecutors.length == 1) {
                if (this.taskConfig && this.taskConfig.nextHandMode && this.taskConfig.nextHandMode == "condition") {
                    return this.newNodeExecutors[0].nodeId;
                }
                return "";
            }
            var nodeId = "";
            this.newNodeExecutors.forEach(item => {
                if (item.selected) {
                    nodeId = item.nodeId;
                }
            })
            return nodeId;
        },
        getNodeUserMap() {
            this.convertData();
            let nodeUserMap = {}
            this.newNodeExecutors.forEach(item => {
                if (item.nodeType == "UserTask" && item.executors && item.executors.length > 0 && item.selected) {
                    nodeUserMap[item.nodeId] = item.executors
                }
                if (item.outcomeNodeUsers && item.outcomeNodeUsers.length > 0) {
                    for (let i = 0; i < item.outcomeNodeUsers.length; i++) {
                        var obj = item.outcomeNodeUsers[i];
                        if (obj.nodeType == "UserTask" && obj.executors && obj.executors.length > 0 && item.selected) {
                            nodeUserMap[obj.nodeId] = obj.executors
                        }
                    }
                }
            })
            return nodeUserMap;
        },
    },
    watch: {
        "nodeExecutors": {
            handler(val) {
                this.newNodeExecutors = Util.deepClone(val);
                this.convertLocal();
            },
            deep: true
        }
    }

}
</script>

<style scoped>
.bpm-task-executors .bpm-table {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-bottom: none;
}

.bpm-task-executors .bpm-table th, td {
    height: 38px;
    line-height: normal;
    background-color: #f8f8f8;
    /*border-radius: 4px 4px 0px 0px;*/
    border-bottom: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    padding: 10px;
    color: #444444;
    font-size: 14px;
    font-weight: normal;
}

.bpm-task-executors .bpm-table th:last-child {
    border-right: none;
}

.bpm-task-executors .bpm-table td {
    background-color: white;
    border-right: 1px solid #d9d9d9;
    color: #46494d;
}
</style>
